<template>
  <ElButton @click="(dialogData.model = true), (dialogData.type = 'add')">添加</ElButton>
  <el-tree style="max-width: 600px" :data="tableData" node-key="id" default-expand-all :expand-on-click-node="false"
    :props="defaultProps">
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span style="margin-left: 18px">
          <el-tag style="margin-right: 18px" type="warning" v-show="data.type == 0">菜单</el-tag>
          <el-tag style="margin-right: 18px" type="danger" v-show="data.type == 2">接口</el-tag>
          <el-tag style="margin-right: 18px" type="success" v-show="data.type == 1">按钮</el-tag>
          <el-button size="small"
            @click="(dialogData.model = true), (dialogData.type = 'add'), (dialogData.parent_id = data.id), (dialogData.key = new Date().getTime())">添加</el-button>

          <el-button size="small"
            @click="(dialogData.model = true), (dialogData.type = 'edit'), (dialogData.id = data.id), (dialogData.key = new Date().getTime())">编辑</el-button>
          <!-- <a style="margin-left: 8px" @click="remove(node, data)"> 删除 </a> -->
        </span>
      </span>
    </template>
  </el-tree>
  <el-dialog v-model="dialogData.model" :title="dialogData.type == 'add' ? '添加' : '编辑'" width="800">
    <powerManage @item="close" :id="dialogData.id" :type="dialogData.type" :parent_id="dialogData.parent_id"
      :key="dialogData.key"></powerManage>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { PowerList as getList, } from '../../api/api';
import { ElButton } from "element-plus";
import powerManage from "./powerManage.vue"
const dialogData = ref({
  model: false,
  type: 'add',
  id: ''
})
const defaultProps = {
  children: 'child',
  label: 'power_name',
}
const tableData = ref([])
onMounted(() => {
  loadList();
});



const loadList = () => {
  try {
    // 这里应该是发送登录请求的代码，例如使用axios或者其他HTTP客户端
    getList({}).then((res) => {
      console.log('res', res)
      tableData.value = res.data

    })

  } catch (error) {
    // 处理登录失败的情况
    console.error('error', error);
    // 可以在这里提示用户登录失败的信息
  }
};
const close = () => {
  dialogData.value = { model: false }
  loadList();
}



</script>
<style scoped>
.el-tree {
  --el-tree-node-content-height: 50px;
  font-size: 16px;
}
</style>
